<script setup lang="ts">
import { reactive } from "vue";

let games = reactive([
  { id: "asgytdfats01", name: "英雄联盟" },
  { id: "asgytdfats02", name: "王者荣耀" },
  { id: "asgytdfats03", name: "穿越火线" },
  { id: "asgytdfats04", name: "和平精英" },
]);
</script>

<template>
  <div class="category">
    <h3>游戏列表</h3>
    <slot :youxi="games"></slot>
  </div>
</template>

<style scoped>
.category {
  background-color: skyblue;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding:10px;
  width:200px;
  height:300px;
}
h2{
  background-color: orange;
  text-align: center;
  font-size : 20px;
  font-weight: 800;
}
</style>